import { Link } from '@brillout/docpress'
import { ConfigSpec } from '../../components'

<ConfigSpec
  env="Vite (development & build-time)"
  global
  isTypeOneLiner
>
`number {:ts}`
</ConfigSpec>

Vike's `+port` setting is just an alias for [Vite's CLI `--port` option](https://vite.dev/guide/cli.html#options) (which sets Vite's [server.port](https://vite.dev/config/server-options.html#server-port) and [preview.port](https://vite.dev/config/preview-options.html#preview-port) configurations).

This:

```ts
// +config.ts

import type { Config } from 'vike/types'

export default {
  port: 1234
} satisfies Config
```

Is equivalent to that:

```ts
// vite.config.ts

import type { UserConfig } from 'vite'

export default {
  server: {
    port: 1234
  },
  preview: {
    port: 1234
  }
} satisfies UserConfig
```

If you want to set two different values between development and preview, then set the values over `vite.config.js` instead of using `+port`.


## See also

- <Link href="/settings" />
